<template>
  <div class="">
    about 页面
    <!-- <p>{{ num }}</p>
    <button @click="num++">++</button> -->
  </div>
</template>

<script>
import { watchEffect, ref, reactive, toRefs, watch} from "vue";
import {onBeforeRouteLeave} from 'vue-router';
import axios from 'axios';
export default {
  setup() {
    axios.get('data.json').then(res => {
      console.log(res);
    })
    // const count = ref(0);
    // watchEffect(()=>{
    //    console.log(count.value) // 这里的值会被打印两次，0，1
    // })

    // const data = reactive({num:0});
    // const obj = reactive({
    //   age: 18
    // })
    // watchEffect(()=>{
    //   //  console.log(data.num) // 这里的值会被打印两次，0，1
    //   //  console.log(data) // 这里的对象只会被打印一次
    //   console.log(obj.age)
    // })

    // setTimeout(() => {
    //   obj.age++
    // },1000)

    // const num = ref(0);
    // let age = 0;
    // 第一个参数是要传入的 监听的值
    // 第二个参数是一个回调函数（回调函数中有两个形参）
    // 第三个参数控制对象
    // watch(age,(newVal,oldVal)=>{
    //    console.log(newVal,oldVal);
    // },{immediate:true})
    // setTimeout(() => {
    //   age++
    // },1000)

    // const data = reactive({
    //   num:0
    // })

    // // 如果使用watch 是一个对象的时候 都一个参数 是一个函数
    // watch(()=> data.num,(newVal,oldVal)=>{
    //    console.log(newVal,oldVal);
    // })

    // setTimeout(() => {
    //   data.num++
    // },1000)

    const num = ref(0);
    const number = ref(20);
    const age = ref(30);
    watch([num, number, age], ([newNum, newNumber,newAge], [oldNum, oldNumber,oldAge]) => {
      console.log(newAge, oldAge); // 打印 1 0
      console.log(newNum, oldNum); // 打印 1 0
      console.log(newNumber, oldNumber); // 打印 21 20
    });

    setTimeout(() => {
      num.value++;
      number.value++;
    }, 1000);


    onBeforeRouteLeave((to,from) => {
       return false
    })
    return {
      // num
      // ...toRefs(data)
    };
  },
};
</script>
<style lang="scss" scoped>
</style>